<div class="list">
				
    {#each list as {src,id,height},index}
        <div  class="photo_c grid-item">
            <img class="photo" id={"id_"+id} on:load={imgload} on:error={imgLoadError} on:click={()=>{previewImg(index)}} src={src.medium} alt="">
        </div>
    {/each}
    {#if isNoData=="noSearchData"}
        <div class="noSearchData"> 
            <SwimmingBG>
            <div class="emoticon_content">
                <div>
                    <span class="emoticon">🤕</span>
                    <p>搜索为空</p> 
                </div>
                </div>
            </SwimmingBG>
        </div>
    {/if}
    {#if isNoData=="noMoreData"}
        <div class="noMoreData"> 
            <SwimmingBG>
            <div class="emoticon_content">
                <div>
                    <span class="emoticon">😭</span>
            <p>已到尽头</p> 
                </div>
                </div>
            </SwimmingBG>
        </div>
    {/if}

</div>
<style>
    .list{
	width: 100%;
    margin: 0px auto;
    column-count: 2;
    column-gap: 1rem;
    padding: 10px;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .list{
        column-count: 5; 
    }
}
@media screen and (min-width: 1024px) {
    .list{
        column-count: 6; 
    }
}

    .photo_c{
        height: auto;

    }
    .photo{
        width: 100%;
        background-color: #d3dadd;
        /* border: solid 1rem var(--borderColor);
        border-bottom-color: var(--borderColor);
        border-left-color: var(--borderColorDeep);
        border-radius: 2px;
        border-right-color: var(--borderColorDeep);
        border-top-color: var(--borderColorLight);
        box-shadow: 0 0 5px 0 rgba(223, 223, 223, 0.18) inset, 0 5px 10px 5px rgba(218, 218, 218, 0.18); */
        box-sizing: border-box;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    .noSearchData{
        width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 3rem;
        /* background: linear-gradient(rgba(213, 213, 213, 0.584),rgba(99, 99, 99, 0.564)); */
        background: linear-gradient(to right, #dd5e89, #f7bb97);
        color: white;
        line-height: 3.6rem;
        letter-spacing:0.3rem;
        box-sizing: border-box;
        text-shadow: #333 0px 4px 10px;
    }
    .noMoreData,.noSearchData{
        font-size: 2rem;
        color: white;
        height: 10rem;
        text-align: center;
        /* background: white; */
        background: linear-gradient(to right, #f92e8d, #082dffa5);
        position: relative;
        overflow: hidden;
    }
    .noMoreData,.noSearchData{
        width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 2rem;
        height: 20rem;
        /* background: linear-gradient(rgba(213, 213, 213, 0.584),rgba(99, 99, 99, 0.564)); */
        background: linear-gradient(to right, #dd5e89, #f7bb97);
        color: white;
        line-height: 3.6rem;
        letter-spacing:0.3rem;
        /* border: white solid 1rem; */
        border-radius: 0.5rem;
        box-sizing: border-box;
        text-shadow: #333 0px 4px 10px;
        overflow: hidden;
    }
    .emoticon_content{
        position: relative;
        z-index: 2;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .emoticon{
        font-size: 5rem;
        display: block;
        text-align: center;
        margin-bottom: 1rem;
    }

</style>
<script>
    import SwimmingBG from "./SwimmingBG.svelte"
    export let list=[];
    export let isNoData="someData"
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    let imgloadIndex=0;
    $:lishChange(list);
    function lishChange(){
        imgloadIndex=0;
        console.log("数组变化")
        dispatch("imgLoading",{index:0,total:list.length})
    }
    function imgload(){
        imgloadIndex+=1
        if(imgloadIndex>=list.length){
            dispatch("imgLoadComplete")
        }
        dispatch("imgLoading",{index:imgloadIndex,total:list.length})
    }
    function imgLoadError(){
        imgloadIndex+=1
    }
    function previewImg(index){
        dispatch("select",{index:index})
}
</script>